<template>
	<el-container>
	  <el-header><el-button type="primary" @click="add_bt(0)">添加</el-button></el-header>
	  <el-main>
		  <el-table
			    :data="list"
			    border
			    style="width: 100%"
				 :stripe="true">
				<el-table-column
			      prop="sort"
			      label="排序"
			     >
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="名称"
			     >
			    </el-table-column>
			    <el-table-column label="图片">
			    　　<template slot-scope="scope" v-if="scope.row.img!=null">
			    　　　　<img :src="getimg+scope.row.img.url" width="30" height="30" class="head_pic"/>
			    　　</template>
			    </el-table-column>
			    <el-table-column label="跳转类型">
			    　　<template slot-scope="scope">
			    　　　	<span>{{banner_item[scope.row.type]}}</span>
			    　　</template>
			    </el-table-column>
				
				<el-table-column label="分类">
				　　<template slot-scope="scope">
				　　　	<span>{{banner_type[scope.row.banner_type]}}</span>
				　　</template>
				</el-table-column>
				
			    <el-table-column
			      fixed="right"
			      label="操作"
			     >
			      <template slot-scope="scope">
			        <el-button @click="edit_bt(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table></el-main>
	  <el-footer>
		  <el-pagination
			style="margin-top: 50px;" background layout="prev, pager, next" :total="total"
				:page-size="size" @current-change="jump_page"
			>
			</el-pagination>
		</el-footer>
		<el-dialog :title="title[type]" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			 <el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="广告名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				
				<el-form-item label="跳转类型">
					 <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
					    <el-option
					      v-for="(item,index) in banner_item"
					      :key="index"
					      :label="item"
					      :value="index">
					    </el-option>
					  </el-select>
				</el-form-item>
				
				<el-form-item label="选择商品" v-if="form.type==1">
					 <el-select v-model="form.value" placeholder="请选择" style="width: 100%;">
					    <el-option
					      v-for="(item,index) in goods"
					      :key="index"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</el-form-item>
				
				<el-form-item label="小程序appid" v-if="form.type==3">
					<el-input v-model="form.value"></el-input>
				</el-form-item>
				
				<el-form-item label="选择店家" v-if="form.type==2">
					 <el-select v-model="form.value" placeholder="请选择" style="width: 100%;">
					    <el-option
					      v-for="(item,index) in shop"
					      :key="index"
					      :label="item.shop_name"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</el-form-item>
				
				
				<el-form-item label="排序">
					<el-input v-model="form.sort" type="number"></el-input>
				</el-form-item>
				<el-form-item label="图片" :label-width="formLabelWidth">
					<template v-if="img_list.url!=''">
						<div style="display: flex;  flex-wrap: wrap;">
							<template>
								<i class="el-icon-circle-close" @click="delimg()"></i>
								<div class="picA" v-if="img_list.url!=''">
									<img class="img" :src="getimg + img_list.url">
								</div>
							</template>
						</div>
					</template>
					<div class="picA" style="margin-left: 19px;" @click="choose_pic" v-if="img_list.url==''">
						<i class="el-icon-plus" style="margin-top: 45%; height: 28px; width: 28px;"></i>
					</div>
				</el-form-item>
			</el-form>
		
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span> 
		</el-dialog>
		<Pic :drawer="drawer" :back_fun="back" :send_father="get_img"></Pic>
	</el-container>
	
	

		
	
	
</template>
<script>
import bannerModel from '../../model/banner.js'
import Pic from '../../components/pic_upload.vue'
import {Api_url} from '../../api/config.js'
export default {
  data() {
    return {
		 tableData: [],
		 form:{
			 name:'',
			 img_id:'',
			 type:'',
			 sort:0,
			 value:'',
		 },
		 img_list:{
			 url:''
		 },
		 goods:[],
		 banner_type:['广告图','弹窗图','公告'],
		 title:['添加广告','编辑广告'],
		 total:0,
		 formLabelWidth:'120px',
		 size:10,
		 getimg:Api_url,
		 banner_item:['不跳转','跳转到文章','房屋'],
		 shop:[],
		 list:[],
		 dialogVisible:false,
		 drawer:false,
		 type:0,//0添加1编辑
		 
    }
  },
  components: {
  	Pic
  },
  mounted(){
	this.get_banner()
  },
  methods: {
	  //获取广告
		get_banner()
		{
			const loading = this.$loading({
			          lock: true,
			          text: '加载中',
			          spinner: 'el-icon-loading',
			          background: 'rgba(0, 0, 0, 0.7)'
			        });
			bannerModel.get().then(res=>{
				this.tableData=res.data
				this.total=this.tableData.length
				this.list = res.data.slice(0, this.size)
				 loading.close();
			})
		
		},
		submit(){
			if(this.type==0){
				bannerModel.insert(this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '添加成功',
						         type: 'success'
						       });
						this.handleClose()
						this.clear_data()
						this.get_banner()
						
					}
				})
			}else{
				bannerModel.update(this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '修改成功',
						         type: 'success'
						       });
						this.handleClose()
						this.clear_data()
						this.get_banner()
						
					}
				})
			}
		},
		edit_bt(item)
		{
			this.form=item;
			this.type=1
			this.dialogVisible=true
			console.log(item)
			this.img_list.url=item.img.url
		},
		get_img(e){
			this.img_list=e
			this.form.img_id=e.id
			this.drawer=false
		},
		back(e){
			this.drawer=false
		},
		//分页跳转
		jump_page(e) {
			const that = this;
			let start = (e - 1) * that.size;
			let end = e * that.size;
			console.log(start, end)
			this.list = this.tableData.slice(start, end);
		},
		del(id){
			this.$confirm('确认删除？', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			         bannerModel.del(id).then(res=>{
			         	if(res.code==200){
			         		this.$message({
			         		         message: '已删除',
			         		         type: 'success'
			         		       });
			         		this.handleClose()
			         		this.clear_data()
			         		this.get_banner()
			         		
			         	}
			         })
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
	
		},
		//添加事件
		add_bt()
		{
			this.type=0
			this.clear_data()
			this.dialogVisible=true
		},
		//关闭事件
		handleClose()
		{
			this.get_banner()
			this.dialogVisible=false
			
		},
		delimg(){
			this.img_list={
				url:''
			};
			this.form.img=''
		},
		choose_pic() {
			this.drawer = !this.drawer	
		},
		clear_data()
		{
			this.form.img=''
			this.form.name=''
			this.form.type=''
			this.form.sort=0
			this.form.value=''
			this.banner_type=''
			this.img_list={
				url:''
			}
		}
  },
  created() {
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
  }
}
</script>
<style>
	.head_pic{
		width: 120px;
		height: 120px;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
</style>
